<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));//得到的是登录的用户的信息
            $(".loginInfo").renderValues(user)
            //查找当前用户拥有的积分
            $.get(baseUrl+"/users/"+user.id+"/mark",function (data) {
                $(".header_top").renderValues(data)
            })
            //保存商品信息的对象
            var commodityInfo;
            var params=getParams();
            //发送请求查询特定状态的所有商品
           $.get(baseUrl+"/commoditys",{"kind":params.kind},function (data) {
               //遍历得到的商品信息和用户信息的数组
               $.each(data.list,function(item,ele){
                   commodityInfo=ele
               })
                //循环遍历商品信息
               $("#commoditycomment").renderValues(data,{getCommodityId:function (item, value) {
                       var url= $(item).data("url")
                       //添加路径给访问的地址
                       $(item).attr('href','/users/'+user.id+url+value)
                   }})

               //点击触发积分兑换事件
               $(".commodityExchange").click(function () {
                   var buttonId=$(this).attr("href")
                   $(document).dialog({
                       type: 'confirm',
                       closeBtnShow: true,
                       content: '您确定要兑换吗!',
                       onClickConfirmBtn: function () {
                           //点击确定触发验证积分是否够的请求
                           $.get(baseUrl+""+buttonId,function (data) {
                               if(data.success==false){
                                   $(document).dialog({
                                       content: '亲,您的积分不够兑换该商品',
                                   });
                               }else{
                                   $(document).dialog({
                                       content: '兑换成功',
                                       onClickConfirmBtn: function () {
                                           window.location.href="/mine/profiles.html"
                                       }
                                   });
                               }
                           })
                       }
                   });
               });

                //购买的点击事件
               $(".commodityPurchase").click(function () {
                   var buttonId=$(this).attr("href")
                   $(document).dialog({
                       type: 'confirm',
                       closeBtnShow: true,
                       content: '您确定要购买吗!',
                       onClickConfirmBtn: function () {
                           //点击确定触发验证积分是否够的请求
                           $.get(baseUrl+""+buttonId,function (data) {
                               if(data.success==false){
                                   $(document).dialog({
                                       content: '亲,您的余额不足,请充值',
                                   });
                               }else{
                                   $(document).dialog({
                                       content: '购买成功',
                                       onClickConfirmBtn: function () {
                                           window.location.href="/mine/profiles.html"
                                       }
                                   });
                               }
                           })
                       }
                   });
               });
           })
            //点击搜索发送请求,查询出商品
            $(".btn-sou").click(function () {

            });

        })
    </script>
</head>
<body>
<!--header start-->
<div class="header">
    <div class="header_top ">
        <div class="left loginInfo"><a href="/mine/commodity.html">
            <img src="/img/commodity/left.png" alt="返回上一层" width="10px"></a>&nbsp;欢迎来到无忧商城！<br/>
            &nbsp;我的账户:<img render-src="headImgUrl" width="30px">
            <a href="/mine/profiles.html" render-html="nickName"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            积分: <a href="#" render-html="mark"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            积分等级:<a href="#" render-html="levelName"></a><br/>
        </div>
    </div>
</div>
<div class="main">
    <div class="logo"><a href="#"><img src="/img/commodity/logo.jpg" /></a></div>
    <!--<div class="search">-->
        <!--<input type="text" name="keyword" class="txt" placeholder="搜索你需要的商品名称" />-->
        <!--<input type="button" class="btn-sou" value="搜索"/>-->
    <!--</div>-->
</div>
</div>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div id="commoditycomment" class="carousel-inner">
        <div render-loop="list">
            <div class="carousel-item active">
                <div class="border commend">
                    <button href="#">
                        <img render-src="list.coverUrl"></br></button><br/>
                        商品名:<a render-html="list.name" style="width: auto"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <small render-html="list.kindName"></small><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#" render-html="list.mark"></a>积分
                    <button class="commodityExchange" render-key="list.id" render-fun="getCommodityId" data-url='/markBuy/'>兑换</button>&nbsp;
                    <a href="#" render-html="list.price"></a>块钱
                    <button class="commodityPurchase" render-key="list.id" render-fun="getCommodityId" data-url='/moneyBuy/'>购买</button>&nbsp;
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--footer end-->
<div class="footer_one">

    <div class="bottom">
        <a href="#"><img src="/img/commodity/img_02.png" alt="微信" /></a>
        <a href="#"><img src="/img/commodity/img_03.png" alt="微博" /></a>
        <a href="#"><img src="/img/commodity/img_04.png" alt="QQ" /></a>
    </div>
</div>
</body>
</html>
